<template>
  <div>
    <el-dialog title="菜单权限分配" :visible.sync="menuPermissionVisible" :before-close="close" width="600px">
      <el-tree v-loading="loading" :data="allPermission" show-checkbox default-expand-all node-key="permissionId"
        :default-checked-keys="checkedPermission" ref="tree" highlight-current :props="defaultProps" @check="handlerCheck()">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: ["menuPermissionVisible", "roleid"], //接受父组件的值
    data() {
      return {
        allPermission: [],
        checkedPermission: [],
        defaultProps: {
          children: "children",
          label: "name"
        },
        loading: true
      };
    },

    created() {
      this.getAllPermission();
      this.getCheckedPermission();
    },

    methods: {
      //加载所有菜单权限
      getAllPermission: function() {
        this.$api.get("/api/Role/loadMenuTree", null).then(rsp => {
          if (rsp != false) {
            this.loading = false;
            this.allPermission = rsp.data;
          }
        });
      },

      //加载选中的权限
      getCheckedPermission: function() {
        let roleId = this.roleid;
        this.$api
          .get("/api/Role/getPermissionByRoleId", {
            roleId: roleId
          })
          .then(rsp => {
            if (rsp != false) {
              this.checkedPermission = rsp.data;
            }
          });
      },

      //选择权限
      handlerCheck: function() {
        let checkednodes = [
          ...this.$refs.tree.getCheckedKeys(),
          this.$refs.tree.getHalfCheckedKeys()
        ].join(",");
        debugger;
        this.$api
          .post("/api/Role/CheckTree", {
            roleid: this.roleid,
            checkednodes: checkednodes
          })
          .then(rsp => {
            if (rsp != false) {}
          });
      },

      close() {
        this.$emit("closeMenu");
      }
    }
  };
</script>
